<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-header>
			<div class="left-panel">
                <el-button type="warning"  @click="batch_export">导出</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-date-picker v-model="search.business_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
        <el-main>
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="550">
                <el-table-column width="1"></el-table-column>
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
                <el-table-column label="业务日期" prop="business_date" align="center"></el-table-column>
                <el-table-column label="单据编号" prop="contract.contract_code" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.contract_id != 0">
                            {{scope.row.contract && scope.row.contract.contract_code}}
                        </div>
                        <div v-if="scope.row.contract_id == 0">
                            {{scope.row.contractReturn && scope.row.contractReturn.return_code}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="业务类型" prop="type" align="center">
                    <template #default="scope">
                        {{ scope.row.type == 1 ? '销售订单' : scope.row.type == 2 ? '销售退货' : scope.row.type == 10 ? '期初欠款' : '其他' }}
                    </template>
                </el-table-column>
                <el-table-column label="期别" prop="money" align="center">
                    <template #default="scope">
                        <div v-for="item in stages_all" :key="item.stages_number">
                        {{ scope.row.stages_number == item.stages_number ? item.type : '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="欠款总额" prop="money" align="center"></el-table-column>
                <el-table-column label="收回欠款" prop="pay_money" align="center"></el-table-column>
                <el-table-column label="应收欠款" prop="only_money" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </scTable>
        </el-main>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    props: {
        query: {type: Object, default: () => ({})},
    },
    emits: ['success', 'closed'],
    data() {
        return {
        mode: "add",
        titleMap: {
            add: '新增账户',
            edit: '欠款单据',
            show: '查看'
        },
        visible: false,
        isSaveing: false,
        apiObj: this.$API.finance.receivable.detail,
        selection: [],
        search: {
            business_date: null
        },
        stages_all: [
            {stages_number: 0, type: '一次性',},
            {stages_number: 1, type: '首期金额',},
            {stages_number: 2, type: '二期金额',},
            {stages_number: 3, type: '三期金额',},
            {stages_number: 4, type: '四期金额',},
            {stages_number: 5, type: '五期金额',},
            {stages_number: 6, type: '六期金额',},
            {stages_number: 7, type: '七期金额',},
            {stages_number: 8, type: '八期金额',},
            {stages_number: 9, type: '九期金额',},
            {stages_number: 10, type: '十期金额',},
            {stages_number: 11, type: '十一期金额',},
            {stages_number: 12, type: '十二期金额',},
        ],
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        submit() {
            this.$emit('success', this.selection)
            this.visible = false
        },
        selectionChange(selection) {
            this.selection = selection;
        },
        upsearch() {
			this.$refs.table.upData(this.search)
		},
		refresh() {
			for (const key in this.search) {
				this.search[key] = null;
			}
			this.$refs.table.upData(this.search)
		},
        /**导出*/
		async batch_export() {
            let query = {
                business_date: this.search.business_date,
                customer_id: this.query.customer_id,
                scene: 2
            }
			var res = await this.$API.finance.receivable.export.get(query);
			if (res.code == 1) {
				this.$message.success("导出成功");
				window.location.href = res.data.url
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
		},
    }
}
</script>

<style></style>
